<script setup lang="ts">
import { computed } from 'vue'
import homeVideo from '@/assets/video/home-loop.mp4'

const props = withDefaults(
    defineProps<{
        height?: string | number
    }>(),
    {
        height: 200,
    },
)

const coverStyle = computed(() => {
    let height =
        typeof props.height === 'string' ? Number(props.height) : props.height
    return {
        height: `${height}px`,
    }
})
</script>

<template>
    <div class="cover" v-bind:style="coverStyle">
        <video
            class="video-container"
            :src="homeVideo"
            loop
            autoplay
            muted="false"
        ></video>
    </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
